<template>
    <lay-card class="conn">
        <lay-table :columns="columns3"
                   :data-source="dataSource3"
                   :page="page3"
                   @change="change3"
                   height="calc(100vh - 220px)"
                   even
                   size="sm"
                   :default-toolbar="['export','print','filter']"
        >
            <template v-slot:toolbar>
                <lay-button-group>
                    <lay-button size="sm" type="primary" prefix-icon="layui-icon-addition">新增</lay-button>
                    <lay-button size="sm" type="normal" prefix-icon="layui-icon-form">修改</lay-button>
                    <lay-button size="sm" type="danger" prefix-icon="layui-icon-delete">删除</lay-button>
                </lay-button-group>
            </template>
            <template v-slot:operator="{ row }">
                <lay-button-group>
                    <lay-button size="xs" type="normal">修改</lay-button>
                    <lay-button size="xs" type="danger">删除</lay-button>
                </lay-button-group>
            </template>
        </lay-table>
    </lay-card>
</template>
<script setup>
import Mock from 'mockjs'
import {ref} from "vue";
const page3 = ref({
    total: 100,
    limit: 10,
    current: 2,
    showRefresh: true,
})
const change3 = ({current, limit}) => {
    // layer.msg("current:" + current + " limit:" + limit);
}
const columns3 = [
    {
        type: "number",
        fixed: "left",
    },
    {
        type: "radio", fixed: "left",
    },
    {
        title: "账户",
        width: "200px",
        slot: "username",
        key: "name",
        sort: true
    }, {
        title: "密码",
        width: "180px",
        slot: "password",
        key: "state"
    }, {
        title: "年龄",
        width: "180px",
        key: "age",
        totalRow: "合并:"
    }, {
        title: "年龄",
        width: "180px",
        key: "age",
        totalRow: "合并:"
    }, {
        title: "年龄",
        width: "180px",
        key: "age",
        totalRow: "合并:"
    }, {
        title: "年龄",
        width: "180px",
        key: "age",
        totalRow: "合并:"
    }, {
        title: "年龄",
        width: "180px",
        key: "age",
        totalRow: "合并:"
    }, {
        title: "年龄",
        width: "180px",
        key: "age",
        totalRow: "合并:"
    }, {
        title: "地址",
        width: "180px",
        key: "address",
        ellipsisTooltip: true
    }, {
        title: "城市",
        width: "180px",
        key: "city"
    }, {
        title: "城市",
        width: "180px",
        key: "city"
    }, {
        title: "城市",
        width: "180px",
        key: "city"
    }, {
        title: "城市",
        width: "180px", fixed: "right",
        key: "city"
    }, {
        title: "操作",
        width: "150px",
        fixed: "right",
        customSlot: "operator",
        key: "operator"
    }
]
let Data = Mock.mock({
    "tableData|100": [{
        'name': '@cname',
        'id|+1': 1,
        'state|10-60': 0,
        'age|10-60': 0,    //10-60以内的随机数，0用来确定类型
        'date': '@date("yyyy-MM-dd")',    //年月日
        'zip': '@city(true)',
        'address': '@city(true)',    //中国城市
        'city': '@city(true)'    //中国城市
    }]
})
const dataSource3 = Data.tableData;
</script>
<style lang="scss" scoped>
.conn {
    height: 100%;
}
</style>
